<template>
	<view class="Menu">
		<!-- 导航条 :style="{ height: $wanlshop.wanlsys().height + 'px' }"-->
		<view class="cu-custom">
			<view class="cu-bar fixed" style="background: #fff;"
				:style="{height: $wanlshop.wanlsys().height + 'px',paddingTop: $wanlshop.wanlsys().top + 'px',}">
				<view class="action">
					<text class="wlIcon-fanhui1" style="margin-left: 0" @tap="$wanlshop.back(1)"></text>
				</view>
				<view class="content" :style="{ top: $wanlshop.wanlsys().top + 'px' }">
					购买订单
				</view>
				<view class="action">
					<text class="wlIcon-gengduo" @tap="showModal('share')"></text>
				</view>
			</view>
		</view>
		<view style="position: fixed;height: auto;  width: auto; top: 0; left: 0; bottom: 0; right: 0;"
			:style="{top: $wanlshop.wanlsys().height + 'px',}">
			<view class="transferBox">
				<view class="assets">
					<view class="assetsT">
						<view class="title">{{$t('otcSellout.block.title.wjsd')}}<!-- 我将收到(预估) --></view>
					</view>
					<view class="assetsM">
						<view class="assetsInput" style="width: 100%;">
							<view class="Inputmoney1">
								<u--input border='none' v-model="money1" @blur='blur'>
									<template slot="suffix">
										<span v-if="types=='77'">YLDA</span>
										<span v-else>YLD</span>
									</template>
								</u--input>
							</view>
						</view>
					</view>
				</view>
				<view class="assets">
					<view class="assetsT">
						<view class="title">{{$t('otcPurchase.block.wyzf.title')}}
							<view class="pick1" @click="show = true">{{type}}
								<u-icon size="10" name="arrow-down-fill" style="margin-left: 16rpx;"></u-icon>
							</view>
						</view>
						<view class="pick">{{$t('otcPurchase.block.wyzf.ye')}}:{{money||0}}</view>
					</view>
					<view class="assetsM">
						<view class="assetsInput">
							<view class="Inputmoney1">
								{{money2}}<span>USDT</span>
							</view>
						</view>

					</view>
				</view>

				<view class="usdtbl">
					<!-- 参考价格 -->{{$t('otcPurchase.tips.ckjg')}}:1USDT ~ {{usdtInfo.usdt_yld}}YLD
				</view>
			</view>

		</view>
		<view class="uni-btn">
			<button class="uni-btn-v" @click="formSubmit1">购买</button>
		</view>
		<u-picker :show="show" :columns="columns" keyName="label" @close='close' @cancel='close' @confirm='confirm'
			:closeOnClickOverlay='true'></u-picker>
		<u-popup :show="show1" mode="bottom" @close="close" :closeable='true' :closeOnClickOverlay='true' round="16rpx">
			<view class="cont">
				<view class="title">请输入支付密码</view>
				<view class="xy">
					<u-code-input v-model="pwd" :space="0" borderColor="#E6E6E6" size='58' :maxlength="6"
						:dot='true'></u-code-input>
				</view>
				<view class="btn-reset" @click="payBtn">支付</view>
			</view>
		</u-popup>
		<u-loading-icon text="支付中..." textSize="18" :show="show2" :vertical='true' loading-color='#fff'
			color="#fff"></u-loading-icon>
	</view>
</template>
<script>
	export default {

		data() {
			return {
				money: "",
				money1: '0',
				money2: '',
				usdtInfo: {},
				id: '',
				show: false,
				show1: false,
				show2: false,
				columns: [
					[{
						label: 'AP',
						id: 6
					}, {
						label: 'UT',
						id: 4
					}]
				],
				type: 'AP',
				typeID: 6,
				pwd: '',
				types: ''
			};
		},

		onLoad(option) {
			this.getMoney()
			this.money1 = option.yld
			this.money2 = option.usdt
			this.id = option.id
			this.types = option.type
			this.usdtbl()

		},
		methods: {
			//获取余额
			getMoney() {
				uni.request({
					url: "/user/getMoney",
					method: 'POST',
					data: {
						type: this.typeID,
					},
					success: (res) => {
						if (res.res.code == 1) {
							this.money = res.res.data.money
						}
					},
				});
			},
			usdtbl() {
				uni.request({
					url: "/user/usdtbl",
					method: 'POST',
					success: (res) => {
						if (res.res.code == 1) {
							this.usdtInfo = res.res.data
						}
					},
				});
			},
			blur() {
				this.money2 = (Number(this.money1) * Number(this.usdtInfo.usdt_yldt_value)).toFixed(3)
			},
			formSubmit1() {
				this.show1 = true
				this.pwd = ''

			},
			payBtn() {
				if (this.pwd == '' || this.pwd == null) {
					uni.showToast({
						title: '请输入支付密码',
						icon: 'none'
					})
					return
				}
				if (this.pwd.length < 6) {
					uni.showToast({
						title: '请输入正确的支付密码',
						icon: 'none'
					})
					return
				}
				uni.request({
					url: "/user/getIsPayPassword",
					method: "POST",
					success: (res) => {
						if (res.res.data.pay_password_status == "yes") {
							uni.request({
								url: "/user/reyzPayPassword",
								method: "POST",
								data: {
									paypassword: this.pwd,
								},
								success: (res) => {
									if (res.res.code == 1) {
										this.show1 = false
										this.formSubmit()
									}
								},
							});
						} else {
							this.$wanlshop.auth("/pages/newPage/paypwd");
						}
					},
				});

			},
			formSubmit() {
				uni.request({
					url: "/user/moneyDealOutTwo",
					method: "POST",
					data: {
						id: this.id,
						type: this.type,
						money: this.money1,
					},
					success: (res) => {
						if (res.res.code == 1) {
							this.$wanlshop.msg(res.res.msg)
							this.$wanlshop.to(`/pages/newPage/purchaseSuccess`);
						}
					},

				});
			},
			//选择
			confirm(val) {
				this.type = val.value[0].label
				this.typeID = val.value[0].id
				this.getMoney()
				this.show = false
			},
			//关闭选择
			close() {
				this.show = false
				this.show1 = false
			}
		}
	};
</script>

<style lang="scss">
	page {
		background: #f8f8f8;
	}

	.Menu {

		.transferBox {
			padding: 0 12px;

			.assets {
				padding: 38rpx 30rpx 34rpx 30rpx;
				background: #fff;
				border-radius: 16rpx;
				margin-top: 24rpx;

				.assetsT {
					display: flex;
					align-items: center;
					justify-content: space-between;
					margin-bottom: 20rpx;

					.title {
						font-weight: 400;
						font-size: 28rpx;
						color: #333333;
						line-height: 48rpx;
						display: flex;
						align-items: center;

						.pick1 {
							background: #F3F3F3;
							border-radius: 4rpx;
							padding: 5rpx 6rpx 5rpx 24rpx;
							font-weight: 400;
							font-size: 24rpx;
							color: #666666;
							line-height: 48rpx;
							min-width: 112rpx;
							display: flex;
							align-items: center;
							justify-content: space-between;
							margin-left: 20rpx;
						}
					}



					.pick {
						font-weight: 400;
						font-size: 24rpx;
						color: #666666;
						line-height: 48rpx;
						min-width: 112rpx;
						display: flex;
						align-items: center;
						justify-content: space-between;
					}
				}

				.assetsM {
					display: flex;
					align-items: center;
					justify-content: space-between;

					.assetsInput {
						width: 50%;

						/deep/.u-input__content__field-wrapper__field,
						.Inputmoney1 {
							font-weight: 600;
							font-size: 52rpx !important;
							color: #FF443C !important;
							line-height: 48rpx !important;
						}

						.Inputmoney1 {
							span {
								font-size: 40rpx;
							}
						}
					}

					.assetsmMoney {
						font-weight: 400;
						font-size: 24rpx;
						color: #999999;
						line-height: 48rpx;
					}
				}
			}

			.usdtbl {
				font-weight: 400;
				font-size: 28rpx;
				color: #999999;
				line-height: 48rpx;
				margin-top: 30rpx;
			}

		}

		.uni-btn-v {
			width: 702rpx;
			height: 96rpx;
			background: #eb5641;
			border-radius: 16rpx 16rpx 16rpx 16rpx;
			margin-top: 40rpx;
			font-weight: 400;
			font-size: 28rpx;
			color: #ffffff;
			line-height: 96rpx;
			position: fixed;
			left: 24rpx;
			bottom: 80rpx;
		}

		.default {
			background: #999;
		}

	}

	.cont {
		.title {
			font-weight: bold;
			font-size: 28rpx;
			color: #333333;
			line-height: 48rpx;
			text-align: center;
			padding: 40rpx 0;
		}

		/deep/.u-code-input {
			justify-content: center;
		}

		.xy {
			margin-bottom: 380rpx;
		}

		.btn-reset {
			width: 93%;
			height: 96rpx;
			background: #eb5641;
			border-radius: 16rpx 16rpx 16rpx 16rpx;
			font-weight: 400;
			font-size: 28rpx;
			color: #ffffff;
			line-height: 96rpx;
			margin: 0 auto 40rpx;
			text-align: center;
		}
	}

	/deep/.u-loading-icon {
		background-color: rgba(0, 0, 0, 0.5);
		width: 100%;
		height: 100%;
		position: fixed;
		left: 0;
		top: 0;
		z-index: 9;

		.u-loading-icon__text {
			color: #fff !important;
		}
	}
</style>